<!-- 设备管理-基础设置-设备总称页面 -->
<template>
  <div class="equip-wrap-common">
    <px-row gutter="16">
      <px-col :span="15" class="col left">
        <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="8">
              <px-form-item label="设备总称">
                <px-input
                  v-model="queryParams.name"
                  placeholder="请输入设备总称"
                  maxlength="50"
                  clearable
                  @blur="queryParams.name = $event.target.value.trim()"
                  @keyup.enter="queryTable"
                >
                  <template #suffix>
                    <px-icon style="cursor: pointer" @click="queryTable">
                      <search />
                    </px-icon>
                  </template>
                </px-input>
              </px-form-item>
            </px-col>
            <px-col :span="16">
              <px-button type="primary" @click="queryTable">查询</px-button>
              <px-button @click="resetTable">重置</px-button>
            </px-col>
          </px-row>
        </px-form>
        <div class="equip-table-btn" style="margin-bottom: 8px">
          <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_ADD'" type="primary" class="table-btn" @click="addEquip" style="margin-right: 8px"
            >新增设备总称</px-button
          >
          <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_DOWNLOAD'" style="margin-right: 8px" type="primary" plain @click="templateDownload"
            >下载模板</px-button
          >
          <BatchUpload
            url="/ifp/digitaltwins/api/v1/equipmentCategory/importData"
            permission="ALL_EQUIP_ARCHIVE_SETTING_NAME_UPLOAD"
            @updateUploadPage="queryTable"
          />
        </div>
        <px-table
          :data="tableData"
          class="equip-table"
          size="small"
          height="calc(100vh - 341px)"
          highlight-current-row
          border
          @current-change="handleCurrentChange"
        >
          <px-table-column label="序号" width="80" align="center" fixed="left">
            <template #default="{ $index }">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
            </template>
          </px-table-column>
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
          <px-table-column fixed="right" label="操作" min-width="120" align="center">
            <template #default="scope">
              <px-tooltip content="详情" placement="top">
                <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_VIEW'" link type="primary" icon="Tickets" @click.stop="handleView(scope.row)" />
              </px-tooltip>
              <px-tooltip content="编辑" placement="top">
                <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_EDIT'" link type="primary" icon="EditPen" @click.stop="handleEdit(scope.row)" />
              </px-tooltip>
              <px-tooltip content="删除" placement="top">
                <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_DELETE'" link type="danger" icon="Delete" @click.stop="handleDelete(scope.row)" />
              </px-tooltip>
            </template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          class="equip-table-pagination"
          :total="total"
          @pagination="queryTable"
        />
      </px-col>
      <px-col :span="9" class="col">
        <div class="custom-form-title">关联系统</div>
        <div v-if="currentRow">
          <div class="equip-table-btn flex-center-between">
            <div style="display: flex">
              <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_TO_TYPE'" type="primary" @click="typeToNameVisible = true" style="margin-right: 8px"
                >新增关联</px-button
              >
              <px-button
                v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_SYSTEM_DOWNLOAD'"
                style="margin-right: 8px"
                type="primary"
                plain
                @click="typeTemplateDownload"
                >下载模板</px-button
              >
              <BatchUpload
                url="/ifp/digitaltwins/api/v1/equipmentCategory/importDataSys"
                permission="ALL_EQUIP_ARCHIVE_SETTING_NAME_SYSTEM_UPLOAD"
                @updateUploadPage="queryTypeTable"
              />
            </div>
            <px-tooltip :content="currentRow?.name" placement="top">
              <px-text truncated class="equipName">{{ currentRow?.name }}</px-text>
            </px-tooltip>
          </div>
          <px-table :data="typeTableData" class="equip-table" size="small" height="calc(100vh - 341px)" border>
            <px-table-column type="index" label="序号" width="80" align="center" fixed="left" />
            <px-table-column
              v-for="(item, index) in typeTableColumns"
              :key="index"
              :label="item.label"
              :min-width="item.minWidth"
              :show-overflow-tooltip="item.showOverflowTooltip"
            >
              <template #default="scope">{{
                scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
              }}</template>
            </px-table-column>
            <px-table-column fixed="right" label="操作" width="60" align="center">
              <template #default="scope">
                <px-tooltip content="移除" placement="top">
                  <px-button
                    v-has="'ALL_EQUIP_ARCHIVE_SETTING_NAME_TO_TYPE_DELETE'"
                    link
                    type="danger"
                    icon="Delete"
                    @click.stop="removeType(scope.row)"
                  />
                </px-tooltip>
              </template>
            </px-table-column>
          </px-table>
        </div>
        <div v-else class="placeholder">请先选择左侧总称</div>
      </px-col>
    </px-row>
    <!-- 新增/修改抽屉 -->
    <AddEquipDrawer :visible="equipVisible" :drawerType="drawerType" :equipRow="equipRow" @queryTable="queryTable" @closeDrawer="closeDrawer" />
    <!-- 查看弹窗 -->
    <ViewEquipDialog :visible="viewEquipVisible" :rowData="rowData" @closeDialog="closeDialog" />
    <!-- 关联系统 -->
    <AddSystemToName :visible="typeToNameVisible" :detailData="currentRow" @closeDrawer="typeToNameVisible = false" @queryTable="queryTypeTable" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_ARCHIVE_SETTING_NAME"
});
import { deleteCategorySystem, deleteEquipName, queryEquipName, queryListByCategoryId } from "@/api/equip/archive";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, onMounted, reactive, toRefs } from "vue";
import BatchUpload from "@/components/Upload/BatchUpload.vue";
import ViewEquipDialog from "../components/ViewEquipDialog.vue";
import AddEquipDrawer from "./components/AddEquipDrawer.vue";
import AddSystemToName from "./components/AddSystemToName.vue";

const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  queryParams: {
    name: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "name", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "code", label: "设备总称编码", minWidth: "120", showOverflowTooltip: true },
    { prop: "createByName", label: "创建人", minWidth: "120", showOverflowTooltip: true },
    { prop: "createTime", label: "创建时间", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  equipVisible: false,
  drawerType: "add",
  equipRow: {},
  viewEquipVisible: false,
  rowData: [],
  typeTableColumns: [
    { prop: "systemName", label: "系统名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "facName", label: "厂区", minWidth: "100", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "80", showOverflowTooltip: true }
  ],
  typeTableData: [],
  currentRow: null,
  typeToNameVisible: false
});
const {
  queryParams,
  tableColumns,
  tableData,
  total,
  equipVisible,
  drawerType,
  equipRow,
  viewEquipVisible,
  rowData,
  typeTableColumns,
  typeTableData,
  currentRow,
  typeToNameVisible
} = toRefs(state);

// 进入页面时触发
onMounted(() => queryTable());

// 查询设备列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryEquipName(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value = {
    name: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 下载模版
const templateDownload = async () => {
  proxy.download("get", "/digitaltwins/api/v1/equipmentCategory/templateDownLoad", {}, "设备总称模板.xlsx");
};
// 下载类型模版
const typeTemplateDownload = async () => {
  proxy.download("get", "/digitaltwins/api/v1/equipmentCategory/templateDownLoadSys", {}, "设备总称关联系统模板.xlsx");
};
// 查看设备-显示弹窗
const handleView = (row: any) => {
  rowData.value = [
    { label: "设备总称", text: row.name },
    { label: "设备总称编码", text: row.code },
    { label: "备注", text: row.remark }
  ];
  viewEquipVisible.value = true;
};
// 查看设备-关闭弹窗
const closeDialog = () => {
  viewEquipVisible.value = false;
};
// 添加设备
const addEquip = () => {
  drawerType.value = "add";
  equipVisible.value = true;
};
// 编辑设备
const handleEdit = (row: any) => {
  equipRow.value = row;
  equipVisible.value = true;
  drawerType.value = "edit";
};
// 关闭抽屉
const closeDrawer = () => {
  equipVisible.value = false;
};
// 删除设备
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前删除设备总称“${row.name}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteEquipName({ id: row.id });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
// 当前选中行
const handleCurrentChange = async row => {
  currentRow.value = row;
  queryTypeTable();
};
// 查询总称关联系统
const queryTypeTable = async () => {
  if (currentRow.value) {
    typeTableData.value = await queryListByCategoryId({ id: currentRow.value.id });
  } else {
    typeTableData.value = [];
  }
};
// 移除关联关系
const removeType = row => {
  PxMessageBox.confirm(`是否移除关联系统项“${row.systemName}”`, "移除提示", {
    confirmButtonText: "移除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteCategorySystem({ id: row.id });
      PxMessage.success("移除成功");
      queryTypeTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
.equip-wrap-common {
  height: calc(100vh - 177px);
  .equip-form {
    padding-top: 12px;
  }
  .equip-table-pagination {
    bottom: auto;
  }
}
.col {
  position: relative;
}
.left {
  border-right: 1px solid #dfdfdf;
}
.equipName {
  font-weight: bold;
  font-size: 16px;
  margin-left: 20px;
}
.custom-form-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 50px;
  margin-top: 2px;
}
.flex-center-between {
  margin-top: 10px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.placeholder {
  margin-top: 200px;
  text-align: center;
  color: rgba(0, 0, 0, 0.32);
}
:deep(.px-popper.is-dark) {
  max-width: 400px;
  .px-popper__arrow::before {
    max-width: 400px;
  }
}
.px-popper.is-dark,
.px-popper.is-dark .px-popper__arrow::before {
  max-width: 500px;
}
</style>
